<template>
  <div>
    <div class="table-flex">
      <table-box
        ref="refTable1"
        style="width:48%"
        table-size="mini"
        :table-config="tableConfig1"
        show-index
        dragable
        :selected-arry.sync="tableSelected1"
        :other-filters="otherFilters1"
        @btnOperate="btnOperate1"
        @row-click="handelClickRow"
        @selection-change="selectionChangeHandle1"
      />
      <table-box
        ref="refTable2"
        style="width:48%"
        table-size="mini"
        :table-config="tableConfig2"
        show-index
        dragable
        no-request
        :selected-arry.sync="tableSelected2"
        :other-filters="otherFilters2"
        @btnOperate="btnOperate2"
        @selection-change="selectionChangeHandle2"
      />
    </div>
    <edit-form1 v-if="showEdit1" ref="formDlg" :visible.sync="showEdit1" :detail-data="activeRowData1" @success="refreshTable(1)" />
    <edit-form2 v-if="showEdit2" ref="formDlg" :visible.sync="showEdit2" :detail-data="activeRowData2" @success="refreshTable(2)" />

  </div>
</template>
<script>
import editForm1 from './EditForm1.vue'
import editForm2 from './EditForm2.vue'
import { deleteItem } from '@/api/marketService/evaluateItemSetting'
export default {
  name: 'EvaluateType',
  components: { editForm1, editForm2 },
  data() {
    return {
      activeRowData1: {},
      activeRowData2: {},
      tableSelected1: [],
      tableSelected2: [],
      otherFilters1: [],
      otherFilters2: [],
      showEdit1: false,
      showEdit2: false,
      activeMainData: {},
      tableConfig1: {
        interfacePath: `${process.env.VUE_APP_BASE_API}/api/v1/decorateProject/page`,
        buttonGroupCode: 'default',
        // hideSearchBar: true,
        tabIndex: 0,
        pageSize: 15,
        order: 'desc',
        // sort: 'creationTime',
        // 表格字段动态配置
        setting: [
          {
            prop: 'decorateName',
            label: '评价类型',
            minWidth: '140'
          },
          {
            prop: 'categoryName',
            label: '评价类别',
            minWidth: '150'
          },
          {
            prop: 'name',
            label: '评价项目',
            minWidth: '150'
          },
          {
            prop: 'enable',
            label: '启用状态',
            minWidth: '100',
            render: (creat, row) => {
              if (row.enable) {
                return <span>启用</span>
              } else {
                return <span>停用</span>
              }
            }
          }
        ],
        btnList: this.isProduction ? null : [{
          buttonName: '新增',
          outerFlag: true,
          optCode: 'add'
        },
        {
          buttonName: '编辑',
          outerFlag: true,
          optCode: 'edit'
        },
        {
          buttonName: '删除',
          outerFlag: true,
          optCode: 'delete'
        },
        {
          buttonName: '刷新',
          outerFlag: true,
          optCode: 'refresh'
        }
        ]
      },
      tableConfig2: {
        interfacePath: `${process.env.VUE_APP_BASE_API}/api/v1/decorateItem/page`,
        buttonGroupCode: 'default',
        hideSearchBar: true,
        tabIndex: 0,
        pageSize: 10,
        order: 'desc',
        // sort: 'creationTime',
        // 表格字段动态配置
        setting: [
          {
            prop: 'context',
            label: '评价要求及基本原则',
            minWidth: '140'
          },
          {
            prop: 'score',
            label: '分值',
            minWidth: '150'
          },
          {
            prop: 'enable',
            label: '启用状态',
            minWidth: '100',
            render: (creat, row) => {
              if (row.enable) {
                return <span>启用</span>
              } else {
                return <span>停用</span>
              }
            }
          }
        ],
        btnList: this.isProduction ? null : [{
          buttonName: '新增',
          outerFlag: true,
          optCode: 'add'
        },
        {
          buttonName: '编辑',
          outerFlag: true,
          optCode: 'edit'
        },
        {
          buttonName: '删除',
          outerFlag: true,
          optCode: 'delete'
        },
        {
          buttonName: '刷新',
          outerFlag: true,
          optCode: 'refresh'
        }
        ]
      }
    }
  },
  computed: {
  },
  async  created() {
  },
  methods: {
    // 设置表格多选行高亮
    tableRowClassName({ row, rowIndex }) {
      const filterArr = this.tableSelected.filter(item => item.id === row.id)
      return filterArr.length > 0 ? 'selected-highlight' : ''
    },
    refreshTable(type) {
      if (type === 1) this.$refs.refTable1.initTableData()
      else if (!this.singleJudge(this.tableSelected1, '主表', true)) {
        return
      } else if (type === 2) this.$refs.refTable2.initTableData()
    },
    btnOperate1(flag) {
      switch (flag) {
        case 'add':
          this.handleEdit(1)
          break
        case 'edit':
          if (!this.singleJudge(this.tableSelected1, '编辑', true)) {
            return
          }
          this.handleEdit(1, this.tableSelected1[0])
          break
        case 'delete':
          if (!this.singleJudge(this.tableSelected1, '删除', true)) {
            return
          }
          this.handleDelete(this.tableSelected1, 1)
          break
        case 'refresh':
          this.refreshTable(1)
          break

        default:
          break
      }
    },
    btnOperate2(flag) {
      switch (flag) {
        case 'add':
          if (!this.singleJudge(this.tableSelected1, '主表', true)) {
            return
          }
          this.handleEdit(2)
          break
        case 'edit':
          if (!this.singleJudge(this.tableSelected2, '编辑', true)) {
            return
          }
          this.handleEdit(2, this.tableSelected2[0])
          break
        case 'delete':
          if (!this.singleJudge(this.tableSelected2, '删除', true)) {
            return
          }
          this.handleDelete(this.tableSelected2, 2)
          break
        case 'refresh':
          this.refreshTable(2)
          break

        default:
          break
      }
    },
    handleDelete(data, type) {
      if (data[0].enable) {
        this.$message.warning('所选项为启用项，请重新选择')
        return
      }

      this.$confirm(`确定删除？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteItem(data[0].id, type).then(res => {
          if (res.success) {
            this.$message.success('操作成功')
            this.refreshTable(type)
          }
        })
      })
    },
    // 新增/编辑
    handleEdit(type, data) {
      if (data && data.id) {
        type === 1 ? this.activeRowData1 = data : this.activeRowData2 = { ...data, ...{
          decorateName: this.tableSelected1[0].decorateName,
          categoryName: this.tableSelected1[0].categoryName,
          name: this.tableSelected1[0].name }}
      } else {
        type === 1 ? this.activeRowData1 = {}
          : this.activeRowData2 = {
            projectId: this.tableSelected1[0].id,
            decorateName: this.tableSelected1[0].decorateName,
            categoryName: this.tableSelected1[0].categoryName,
            name: this.tableSelected1[0].name
          }
      }
      type === 1 ? this.showEdit1 = true : this.showEdit2 = true
    },
    handelClickRow({ row }) {
      this.otherFilters2 = [{ id: 'projectId', property: 'projectId', operator: '=', value: row.id }]
      this.$nextTick(() => {
        this.refreshTable(2)
      })
    },
    selectionChangeHandle1(rows) {
      this.tableSelected1 = rows
    },
    selectionChangeHandle2(rows) {
      this.tableSelected2 = rows
    }
  }
}
</script>
<style lang="scss"  scoped>
.table-flex{
  display: flex;
  justify-content: space-between
}
</style>
